<template>
	<view class="auth_login">
		<view class="self_head">
			<view class="left_icon" @click="$nav('',3)"><uni-icons color="#fff" size="20" type="arrowleft"></uni-icons></view>
			<view class="title"><image src="../../static/auth/logo.png" mode="aspectFit"></image></view>
		</view>
		
		<!-- #ifdef APP-PLUS -->
		<view class="input_main app">
		<!-- #endif -->
		<!-- #ifndef APP-PLUS -->
			<view class="input_main">
		<!-- #endif -->
			<view class="title">登录</view>
			<view class="item">
				<view class="lab"><uni-icons type="person-filled" size="20" color="#333"></uni-icons></view>
				<view class="input">
					<input type="text" v-model="params.phone" placeholder="请输入您的手机账号" />
				</view>
			</view>
			<view class="item">
				<view class="lab"><uni-icons type="locked-filled" size="20" color="#333"></uni-icons></view>
				<view class="input">
					<input type="password" v-model="params.password" placeholder="请输入您的密码" />
				</view>
			</view>
			<view class="login_btn" @click="login">立即登录</view>
			<view class="other">
				<text @click="$nav('/pagesAuth/auth/forget_password')">忘记密码？</text>
				<text @click="$nav('/pagesAuth/auth/register')">新用户注册</text>
			</view>
		</view>
		<view class="wechat">
			<view class="title">第三方登录方式</view>
			<view class="line"></view>
			<view class="line2"></view>
			<!-- #ifdef APP-PLUS -->
			<view class="wechat_icon" @click="wxlogin">
				<uni-icons color="rgb(80, 182, 116)" size="35" type="weixin"></uni-icons>
			</view>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<button  class="wechat_icon btn" type="primary" open-type="getUserInfo" @getuserinfo="getUserInfo" withCredentials="true">
				<uni-icons style="margin-right: 20rpx;" color="#fff" type="weixin"></uni-icons>
				微信登录
			</button >
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="wechat_icon" @click="wxlogin">
				<uni-icons color="rgb(80, 182, 116)" size="35" type="weixin"></uni-icons>
			</view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				params:{},
			};
		},
		methods:{
			login(){
				this.$http(this.$api.login,this.params).then(res=>{
					if(res.code == 200){
						uni.$emit('users')
						uni.setStorageSync('token',res.data.token);
						uni.switchTab({
							url:'/pages/index/self'
						})
					}else{
						return this.$toast(res.msg);
					}
				})
			},
			wxlogin(){
				
				// #ifdef H5
				console.log(this.rootUrl + "oauth/weixin")
				return window.location.href=this.$api.rootUrls + "oauth/weixin"
				// #endif
				
				// return this.$toast('暂未开放');
				uni.login({
				  provider: 'weixin',
				  success:  (loginRes)=> {
				    // console.log(loginRes.authResult);
					// 获取用户信息
					uni.getUserInfo({
					  provider: 'weixin',
					  success:  (infoRes)=> {
						loginRes.authResult.nickname = infoRes.userInfo.nickName
						loginRes.authResult.avatar = infoRes.userInfo.avatarUrl
						this.$http(this.$api.authLogin,loginRes.authResult).then(res=>{
							console.log(res)
							if(res.code== 200){
								this.$toast('登陆成功')
								uni.$emit('users')
								uni.setStorageSync('token',res.data.token);
								uni.switchTab({
									url:'/pages/index/self'
								})
							}else{
								this.$toast('登录异常')
							}
						})
					  }
					});
				  }
				});
			},
			getUserInfo(){
				uni.login({
				  provider: 'weixin',
				  success:  (loginRes)=> {
				    // console.log(loginRes.code);
					this.getCode(loginRes.code);
				  }
				});
			},
			getCode(code){
				this.$http(this.$api.authLogin,{code:code,name:'weixin'}).then(resa=>{
					// 获取用户信息
					uni.getUserInfo({
					  provider: 'weixin',
					  success:  (infoRes)=> {
						var authResult={};
						authResult.nickname = infoRes.userInfo.nickName
						authResult.avatar = infoRes.userInfo.avatarUrl
						authResult.openid = resa.data.openid
						authResult.auth_name = 'weixin'
						this.$http(this.$api.authLogin,authResult).then(res=>{
							if(res.code== 200){
								this.$toast('登陆成功')
								uni.$emit('users')
								uni.setStorageSync('token',res.data.token);
								uni.switchTab({
									url:'/pages/index/self'
								})
							}else{
								this.$toast('登录异常')
							}
						})
					  }
					});
				})
			},
		}
	}
</script>

<style lang="scss">
	
.auth_login{
	position: relative;
	.line{height: 1px;background: #eee;margin:0 100rpx;border-radius: 2rpx;margin-top: 20rpx;}
	.line2{height: 1px;background: #fff;margin:0 100rpx;border-radius: 2rpx;}
	.wechat{
		margin-top: 180rpx;
		.title{text-align: center;color:#666;font-size: $uni-font-size-base;}
		.wechat_icon{
			text-align: center;
			margin-top: 40rpx;
			&.btn{
				width: 80%;
				margin:0 auto;
			}
		}
	}
	.input_main{
		.other{
			display: flex;
			color:#999;
			font-size: $uni-font-size-base;
			margin-top: 20rpx;
			text{
				&:last-child{text-align: right;}
				flex: 1;
			}
		}
		.login_btn{
			width: 100%;
			text-align: center;
			border-radius: 10rpx;
			background: $linear-gradient;
			color:#fff;
			line-height: 80rpx;
		}
		.item{
			margin-bottom: 60rpx;
			border-bottom: 1px solid #eee;
			padding-bottom: 15rpx;
			display: flex;
			.lab{flex: 0 0 80rpx;}
			.input{font-size: $uni-font-size-base;flex: 1;}
		}
		.title{
			margin-bottom: 80rpx;
			font-size: 42rpx;
			font-weight: bold;
			border-bottom: 6rpx solid $uni-color-error;
			width: 140rpx;
			padding-bottom: 20rpx;
		}
		background: #fff;
		position: relative;
		z-index:300;
		width:90%;
		margin:-100rpx auto 0 auto;
		min-height: 400rpx;
		border-radius: 10rpx;
		padding: 30rpx 30rpx 80rpx 30rpx;
		box-sizing: border-box;
		&.app{margin-top: -90rpx;  }   
	}
	.self_head{
		.title{
			text-align: center;
			padding-top: 140rpx;
			image{width: 400rpx;height: 130rpx;}
			display: block;
		}
		.desc{
			text-align: center;
			margin-top: 30rpx;
		}
		background: $linear-gradient;
		padding-top: calc(var(--status-bar-height));
		min-height: 400rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		border-radius: 0 0 30% 30%;
		color:#fff;
		.left_icon{
			position: absolute;background: rgba(#000, 0.4);border-radius: 50%;width: 70rpx;height: 70rpx;text-align: center;box-sizing: border-box;
			padding-top: 12rpx;
			left:40rpx;top:calc(var(--status-bar-height) + 40rpx);
		}
		box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
	}
}

</style>
